<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>E-code后台模板</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="./css/defalut.theme.css" />
</head>
<body>
    <!-- 顶头部 start -->
    <header>
        <div class="head">
            <div class="logo pull-left">
                <img width="40" height="30" src="./images/admin-logo.png" alt="">
                <b>&nbsp;&nbsp;E-code</b>
            </div>
            <div class="info-right pull-right">
                <ul>
                    <a href=""><li class="pull-right"><i class="glyphicon glyphicon-home"></i> 网站前台 </li></a>
                    <a  href=""><li class="pull-right"><i class="glyphicon glyphicon-refresh"></i> 清除缓存 </li></a>
                    <a href=""><li class="pull-right"><i class="glyphicon glyphicon-user"></i> 欢迎：Admin </li></a>
                </ul>
            </div>

        </div>
    </header>
    <!-- 顶头部 stop -->

    <!-- 左侧菜单 start -->
    <aside>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-cog"></i>系统设置<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
                <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>网站设置</dd></a>
                <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>自定义导航</dd></a>
                <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>区域管理</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-tower"></i>权限管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>管理员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>角色管理</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>管理员日志</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>会员管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-th-list"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-folder-open"></i>页面类型<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>标签页</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>列表页</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>编辑页</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
        <dl class="left-nav">
            <dt><i class="glyphicon glyphicon-user"></i>栏目管理<i class="arrow-right glyphicon glyphicon-menu-left"></i></dt>
            <dl>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员列表</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员等级</dd></a>
            <a href=""><dd><i class="glyphicon glyphicon-hand-right"></i>会员充值</dd></a>
            </dl>
        </dl>
    </aside>
    <!-- 左侧菜单 stop -->

    <!-- 主区域 start -->
    <div class="main">
        <!-- 路径导航 start -->
        <ol class="breadcrumb">
          <li><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;<a href="#">后台首页</a></li>
          <li class="active">后台管理中心</li>
        </ol>
        <!-- 路径导航 end -->

        <div class="panel panel-default">
            <div class="panel-heading"> <i class="glyphicon glyphicon-th-list"></i> 栏目页面</div>
            <div class="panel-body">
                <nav class="navbar navbar-default">
                  <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-2">
                            <!-- 添加按扭 start -->
                            <form class="navbar-form navbar-left">
                                <a href=""><button class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> 添加</button></a>
                                <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-trash"></i> 删除</button>
                            </form>
                            <!-- 添加按扭 end -->
                        </div>
                        <div class="col-md-10">
                            <form class="navbar-form navbar-right" role="search">
                                <!-- 单项组 start -->
                                <div class="input-group">
                                  <span class="input-group-addon" id="sizing-addon1">关键字</span>
                                  <input type="text" class="form-control" placeholder="大家都在搜" aria-describedby="sizing-addon1">
                                </div>
                                <!-- 单项组 end -->
                                <!-- 下拉组 start -->
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <select class="form-control">
                                            <option>请选择</option>
                                            <option>手机号</option>
                                            <option>用户名</option>
                                        </select>
                                    </div>
                                    <input type="text" class="form-control" aria-label="...">
                                </div>
                                <!-- 下拉组 end -->
                                <!-- 单独下拉 start -->
                                <div class="input-group">
                                    <select class="form-control" name="" id="">
                                      
                                      <option>支付状态</option>
                                      <option>已支付</option>
                                      <option>未支付</option>
                                    </select>
                                </div>
                                <!-- 单独下拉 end -->
                                <!-- 时间控件 start -->
                                <div class="input-group date form_datetime" data-date="" data-date-format="hh:ii" data-link-field="hh:ii">
                                    <input class="form-control" size="14" type="text" value="" readonly="">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                                <!-- 时间控件 end -->
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i> 筛选</button>
                            </form>
                        </div>
                    </div>
                  </div>
                </nav>

                <table class="table table-bordered table-hover">
                    <tr><th><input name="id" id="all-box" type="checkbox"></th><th>会员昵称</th> <th>会员等级</th><th>邮件地址</th><th>手机号码</th><th>余额</th><th>状态</th><th>积分</th><th>注册日期</th><th>操作</th></tr>
                    <tr>
                        <td><input name="id" type="checkbox"></td>
                        <td>鬼谷子</td>
                        <td>白银会员</td>
                        <td>dengyunrui@qq.com</td>
                        <td>13800138006</td>
                        <td> 238.90</td>
                        <td>
                            <span class="e-status badge"><i class="glyphicon glyphicon-ok"></i></span>
                            <span class="badge"><i class="glyphicon glyphicon-remove"></i></span>
                        </td>
                        <td> 1300</td>
                        <td>2009-06-15 14:49</td>
                        <td>
                            <a href=""><span class="label label-primary e-action"><i class="glyphicon glyphicon-eye-open"></i></span></a>
                            <a href=""><span class="label label-info e-action"><i class="glyphicon glyphicon-pencil"></i></span></a>
                            <a href="javascript:;" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="label label-danger e-action"><i class="glyphicon glyphicon-trash"></i></span></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input name="id" type="checkbox"></td>
                        <td>鬼谷子</td>
                        <td>白银会员</td>
                        <td>dengyunrui@qq.com</td>
                        <td>13800138006</td>
                        <td> 238.90</td>
                        <td>
                            <span class="e-status badge"><i class="glyphicon glyphicon-ok"></i></span>
                            <span class="badge"><i class="glyphicon glyphicon-remove"></i></span>
                        </td>
                        <td> 1300</td>
                        <td>2009-06-15 14:49</td>
                        <td>
                            <a href=""><span class="label label-primary e-action"><i class="glyphicon glyphicon-eye-open"></i></span></a>
                            <a href=""><span class="label label-info e-action"><i class="glyphicon glyphicon-pencil"></i></span></a>
                            <a href=""><span class="label label-danger e-action"><i class="glyphicon glyphicon-trash"></i></span></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input name="id" type="checkbox"></td>
                        <td>鬼谷子</td>
                        <td>白银会员</td>
                        <td>dengyunrui@qq.com</td>
                        <td>13800138006</td>
                        <td> 238.90</td>
                        <td>
                            <span class="e-status badge"><i class="glyphicon glyphicon-ok"></i></span>
                            <span class="badge"><i class="glyphicon glyphicon-remove"></i></span>
                        </td>
                        <td> 1300</td>
                        <td>2009-06-15 14:49</td>
                        <td>
                            <a href=""><span class="label label-primary e-action"><i class="glyphicon glyphicon-eye-open"></i></span></a>
                            <a href=""><span class="label label-info e-action"><i class="glyphicon glyphicon-pencil"></i></span></a>
                            <a href=""><span class="label label-danger e-action"><i class="glyphicon glyphicon-trash"></i></span></a>
                        </td>
                    </tr>
                </table>
                <nav aria-label="...">
                    <ul class="pagination">
                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    
    <!-- 模糊弹出框 start -->
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="mySmallModalLabel">确认删除吗？</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-danger center-block">确定</button>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-info center-block" data-dismiss="modal" aria-label="Close">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模糊弹出框 end -->

    <!-- 主区域 stop -->

    <!-- 底部区域 start -->
    <footer>
        
    </footer>
    <!-- 底部区域 stop -->
<script src="./javascript/jquery.min.js"></script>
<script src="./javascript/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="./javascript/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="./javascript/Chart.js"></script>
<script src="./javascript/bootstrap.min.js"></script>
<script src="./javascript/defalut.theme.js"></script>
<script>
    $(function(){
        // 左侧菜单展开事件
        $('.left-nav').click(function(){
            $('.left-nav').children('dt').children('.arrow-right').removeClass('glyphicon-menu-down');
            $('.left-nav dl').hide("slow");
            $(this).children('dl').stop(true, false).slideToggle("slow");
            $(this).children('dt').children('.arrow-right').addClass('glyphicon-menu-down');
        });
        //时间控件
        $(".form_datetime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",

        });
        //全选 全不选
        $("#all-box").click(function(){
            if($(this).is(":checked")){
                $("input[name='id']").prop("checked",true);
            }else{
                $("input[name='id']").prop("checked",false);
            }
        });
    });
</script>    
</body>
</html>